<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <div class="top"></div>

    <div class="user-tit">
        <div class="container">
            <p>
                为方便您购买，请提前登录
                <span class="goLogin">立即登录</span>
                <a href="javascript:;" class="gb-user-tit">X</a>
            </p>
        </div>
    </div>
    <div class="mi-detail">
        <div class="container">
            <div class="page-info">
                <div class="left">
                    <div class="wrapInner">
                        <!-- <div class="shadow"></div> -->
                        <!-- <img class="smallImg"
                            src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg";
                            alt=""> -->
                    </div>
                    <ul class="switchList">
                        <!-- <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                                alt=""></li>
                        <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                                alt=""></li>
                        <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                                alt=""></li>
                        <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                                alt=""></li> -->

                    </ul>
                </div>
                <div class="right">
                    <div class="scaleBar">
                        <!-- <img class="bigImg"
                            src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg"
                            alt=""> -->
                    </div>
                    <div class="goodsInfo">
                        <!-- <h2>米家扫拖机器人2C/1T/1C 配件</h2>
                        <div class="xmzy">小米自营</div>
                        <div class="jg">29元</div>
                        <div class="buy-box-child">
                            <p>选择版本</p>
                            <ul class="cl">
                                <li class="active">8GB+256GB</li>
                                <li>12GB+256GB</li>
                                <li>12GB+521GB</li>
                            </ul>
                        </div>
                        <div class="buy-box-child">
                            <p>选择颜色</p>
                            <ul class="cl">
                                <li class="active">陶瓷黑</li>
                                <li>陶瓷白</li>
                            </ul>
                        </div>
                        <div class="buy-box-child">
                            <p>选择套装</p>
                            <ul class="cl">
                                <li class="active">标准版</li>
                                <li>套装版(增充电器)</li>
                            </ul>
                        </div>
                        <div class="info">
                            <div class="infotit">
                                小米11 Ultra 8GB+256GB 陶瓷黑
                                <span>5499元</span>
                            </div>
                            <div class="total-price">
                                总计: 5499元
                            </div>
                        </div> -->

                        <!-- <div class="infoBtn">
                            <button type="button">加入购物车</button>
                        </div>
                        <ul class="after-sale-info">
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>小米自营</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>小米发货</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>7天无理由退货</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>运费说明</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>企业信心</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>售后服务政策</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>7天价格保护</em>
                            </li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-main">
            <div class="container">
                <h3>价格说明</h3>
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43e2954feb6d1b108438481f1d5b0bd3.png" alt="">
            </div>
        </div>
    </div>


    <div class="footer"></div>
</body>
<script>
    $(document).ready(function () {
        $(".top").load("./header.html")
        $(".footer").load("./footer.html")
    })

    // 获取用户登录状态
    var user = getCookie("lgc");
    if (user) {
        $(".user-tit").hide();
    }
    $(".gb-user-tit").click(function () {

        $(".user-tit").hide();
    })
    $(".goLogin").click(function () {
        location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
    })

    $(function () {
        // 获取地址栏中 gid
        var url = urlParse();
        var gid = url.gid;
        // 如果没有 gid 跳转到首页
        if (!gid) {
            location.href = "./index.html"
        }

        // 小图的 图片列表
        var smallImgList = [];
        // 大图的 图片列表
        var bigImgList = [];

        searchGoodsByGoodsId({ gid }).then(result => {
            var { status, data: { goodsId, goodsName, goodsPrice, goodsImg, smallPicList, bigPicList } } = result;

            console.log(bigPicList);
            if (!status) {
                location.href = "./index.html";
            }

            $(".wrapInner").html(`<div class="shadow"></div>
            <img class="smallImg"
                src="${bigPicList[0]}";
            alt="">`);

            var html = "";
            var len = smallPicList.length >= 5 ? 5 : smallPicList.length;
            for (var i = 0; i < len; i++) {
                html += `<li><img src="${smallPicList[i]}"
                    alt=""></li>`
                smallImgList.push(smallPicList[i]);
                bigImgList.push(bigPicList[i]);
            }
            $(".switchList").html(html);

            $(".scaleBar").html(` <img class="bigImg"
                    src="${bigPicList[0]}"
                    alt="">`)

            $(".goodsInfo").html(`<h2>${goodsName}</h2>
                        <div class="xmzy">小米自营</div>
                        <div class="jg">${goodsPrice}元</div>
                        <div class="buy-box-child">
                            <p>选择版本</p>
                            <ul class="cl">
                                <li class="active">8GB+256GB</li>
                                <li>12GB+256GB</li>
                                <li>12GB+521GB</li>
                            </ul>
                        </div>
                        <div class="buy-box-child">
                            <p>选择颜色</p>
                            <ul class="cl">
                                <li class="active">陶瓷黑</li>
                                <li>陶瓷白</li>
                            </ul>
                        </div>
                        <div class="buy-box-child">
                            <p>选择套装</p>
                            <ul class="cl">
                                <li class="active">标准版</li>
                                <li>套装版(增充电器)</li>
                            </ul>
                        </div>
                        <div class="info">
                            <div class="infotit">
                                ${goodsName}
                                <span>${goodsPrice}元</span>
                            </div>
                            <div class="total-price">
                                总计: ${goodsPrice}元
                            </div>
                        </div>
                        <div class="infoBtn">
                            <button type="button" class="addToShoppingCar">加入购物车</button>
                        </div>
                        <ul class="after-sale-info">
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>小米自营</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>小米发货</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>7天无理由退货</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>运费说明</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>企业信心</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>售后服务政策</em>
                            </li>
                            <li>
                                <i class="iconfont">&#xed1b;</i>
                                <em>7天价格保护</em>
                            </li>`)

            $(".buy-box-child ul li").click(function () {
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
            })

            $(".switchList").children(":first").addClass("active");
            // console.log(smallImgList);
            // console.log(bigImgList);
            $(".switchList li").mouseenter(function () {
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                // console.log($(this).index());
                $(".smallImg").prop("src", bigImgList[$(this).index()]);
                $(".bigImg").prop("src", bigImgList[$(this).index()])
            })

            // 加入购物车功能
            // 加入购物车  => 需要知道哪些信息?
            // 谁  买了什么东西  买了几件?
            // 谁             当前登录的用户?
            // 买了什么东西?   商品编号
            // 买了几件? 

            $(document).on("click", ".addToShoppingCar", function () {

                var user = getCookie("lgc");
                // var buyNum = $(".count-input").val();
                console.log(user);
                if (user) { //有用户  => 用户登录   => 加入购物车
                    addToShopingCar({ user, gid, buyNum: 1 }).then(function () {
                        var { status, msg } = result;
                        console.log(result);
                        if (status) {
                            if (confirm("购买成功,是否进入购物车?")) {
                                location.href = "cart.html";
                            }
                        } else {
                            alert(msg);
                        }

                    });

                } else {

                    // 问题?
                    // 用户没有登录  =>    去登录 => 登录成功(跳转主页)  

                    // 期望=> 登录时,从哪里来,回哪里去?

                    // 怎么解决? 跳转登录的同时,将当前网页url也作为数据传入(先编码,在传入)

                    location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
                }


            })
        });


        // 放大镜效果
        var maxLeft = null;
        var maxTop = null;
        var sacle = null; // 2.5


        // 鼠标移入
        $(".wrapInner").mouseenter(function () {
            $(".shadow").show();
            $(".scaleBar").show();

            maxLeft = $(".wrapInner").width() - $(".shadow").width();
            maxTop = $(".wrapInner").height() - $(".shadow").height();

            sacle = $(".bigImg").width() / $(".smallImg").width();
        })
        // 鼠标移出
        $(".wrapInner").mouseleave(function () {
            $(".shadow").hide();
            $(".scaleBar").hide();
        })
        // 鼠标滑动
        $(".wrapInner").mousemove(function (e) {
            // console.log(e);

            var x = e.pageX - $(this).offset().left - $(".shadow").width() / 2;
            var y = e.pageY - $(this).offset().top - $(".shadow").height() / 2;
            console.log($(this).offset().left);

            // 移动之前判断 是否超出临界值 (小于最小值 大于最大值)
            if (x < 0) x = 0;
            if (x > maxLeft) x = maxLeft;
            if (y < 0) y = 0;
            if (y > maxTop) y = maxTop;

            // shadow 移动的距离
            $(".shadow").css({
                left: x + "px",
                top: y + "px"
            })
            // 由上面可知 bigImg 移动的距离为 大图/小图的比例 * shadow 移动的距离 且为反方向移动
            $(".bigImg").css({
                left: -sacle * x + "px",
                top: -sacle * y + "px"
            })
        })

        // 循环图片列表
        // debugger;
        // $(".switchList li").mouseenter(function () {
        //     // $(this).siblings().removeClass("active");
        //     // $(this).addClass("active");
        //     console.log(666);
        // })

    })


    // 获取 网址上的数据
    function urlParse() {
        var search = location.search;
        var data = {};
        if (search) {
            var str = search.substring(1);
            var list = str.split("&");
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var key = item.split("=")[0];
                var val = item.split("=")[1];
                data[key] = val;
            }
        }
        return data;
    }
</script>

</html>